<template>
  <view class="base-time-line-item" :style="[setItemSty]">
    <!-- 左侧 -->
    <view class="title">
      <slot name="title">
        {{ title }}
      </slot>
    </view>
    <!-- 线条 -->
    <view :class="['line', showLine ? '' : 'hide-line']" :style="[setLineSty]">
      <slot name="dot">
        <view class="dot" :style="[setDotSty]">
		  
		</view>
      </slot>
    </view>
    <!-- 主体内容 -->
    <view class="content">
      <slot></slot>
    </view>
  </view>
</template>

<script>
export default {
  inject: ["colors", "tops", "minHeights"],
  props: {
    // 最左侧文本值
    title: String,
    // 是否显示线条
    showLine: {
      type: Boolean,
      default: true
    },
    // 圆点颜色
    color: String,
    // 圆点偏移值
    top: [String, Number],
    // 占据最小的高度
    minHeight: [String, Number],
    // 线条自定义样式
    lineStyle: Object,
    // 圆点自定义样式
    dotStyle: Object,
		// item自定义样式
    itemStyle: {
		backgroundColor:'rgba(61, 230, 255, 1)'
	}
  },
  computed: {
    setLineSty() {
      let sty = {
        backgroundColor: this.color || this.colors,
        ...this.lineStyle
      };
      return sty;
    },
    setDotSty() {
      let t = this.top || this.tops;
      t = typeof t === "number" ? t + "rpx" : t;
      let sty = {
        backgroundColor: this.color || this.colors,
        top: t,
        ...this.dotStyle
      };
      return sty;
    },
    setItemSty() {
      let m = this.minHeight || this.minHeights;
      m = typeof m === "number" ? m + "rpx" : m;
      let sty = {
        minHeight: m,
        ...this.itemStyle
      };
      return sty;
    }
  }
};
</script>

<style scoped>
.base-time-line-item {
  display: flex;
}
.base-time-line-item .line {
  width: 1px;
  position: relative;
  margin: 0 30rpx;
}
.base-time-line-item .dot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background-color: rgba(61, 230, 255, 1);
}
.base-time-line-item .hide-line {
  width: 0px;
}
.base-time-line-item .content {
  flex: 1;
}
</style>
